<template>
  <div id="PG-SGA">
   <div class="rom">
      <div class="top">
        <van-nav-bar
          class="van-nav-bar"
          title="PG-SGA"
          left-text="返回"
          left-arrow
          right-text="营养测评列表"
          @click-left="onClickLeft()"
          @click-right="$router.push(`/pg-SGAList/${detailId}`)"
          fixed 
          placeholder
        ></van-nav-bar>
        <div class="date">{{ date }}</div>
      </div>
      <div class="bom">
        <div class="bom-info">
          <div class="journalTitle">
            <!-- <img src="@/assets/images/journal/stjyd.png" alt /> -->
            <h1>基本情况记录</h1>
          </div>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field 
              v-model="list.tizhong" 
              label="当前体重" 
              type="number" 
              maxlength="6"
              placeholder="请输入"
              required
              :rules="[{ required: true, message: '请输入当前体重！' }]"/>
            </van-col>
            <van-col span="3" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field
                v-model="list.tizhong1"
                label="一个月前体重"
                placeholder="请输入"
                type="number"
                maxlength="6"
                required
                :rules="[{ required: true, message: '请输入一个月前体重！' }]"/>
            </van-col>
            <van-col span="3" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field
                v-model="list.tizhong2"
                label="六个月前体重"
                placeholder="请输入"
                type="number"
                maxlength="6"
                required
                :rules="[{ required: true, message: '请输入六个月前体重！' }]"
              />
            </van-col>
            <van-col span="3" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20" class="old">
              <van-field
                readonly
                label="过去两周我的体重"
                placeholder=""
              />
            </van-col>
          </van-row>
          <van-radio-group style="padding-left:16px" v-model="radioTz" direction="horizontal" @change="tzbh">
            <van-radio icon-size="12px" name="1">减轻(1)</van-radio>
            <van-radio icon-size="12px" name="2">没变化(0)</van-radio>
            <van-radio icon-size="12px" name="3">增加(0)</van-radio>
          </van-radio-group>
        </div>
        <div class="bom-info bom-infoTow main">
          <div class="journalTitle">
            <!-- <img src="@/assets/images/journal/stzz.png" alt /> -->
            <h1>主管整体营养状况评量表</h1>
          </div>
          <div class="eat">
            <p class="titleP">进食情况 （多选）</p>
            <div class="eatCon">
              <span class="serialNumber">1</span>
              <div class="subject"> 
                <p>在过去的1月内，我的进食情况与平时情况相比：</p> 
                <div class="subjectCon" >
                  <div class="checkBox" v-for="(item,idx) in eat" :key="idx">
                    <van-checkbox  icon-size="12px" shape v-model="eat[idx].check"  ref="checkboxes">{{ item.title }}</van-checkbox>
                  </div>
                </div>
              </div>
            </div>
            <div class="atPresent eatCon">
              <span class="serialNumber">2</span>
              <div class="subject"> 
                <p>我目前进食（多选）</p> 
                <div class="subjectCon" >
                  <div class="checkBox" v-for="(item,idx1) in atPresent" :key="idx1">
                    <van-checkbox  icon-size="12px" shape v-model="atPresent[idx1].check"  ref="checkboxes">{{ item.title }}</van-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="symptom">
            <p class="titleP">症状 （多选）</p>
            <div class="eatCon">
              <span class="serialNumber">1</span>
              <div class="subject"> 
                <p>最近2周我经常存在以下问题影响我摄入足够的饮食（多选）</p> 
                <div class="subjectCon" >
                  <div class="checkBox" v-for="(item,idx2) in symptom" :key="'a'+idx2">
                    <van-checkbox  
                    icon-size="12px" 
                    shape 
                    v-model="symptom[idx2].check"
                    ref="checkboxes">
                    {{ item.title }}
                    </van-checkbox>
                  </div>
                  <p style="margin-top:10px;font-size:12px">其他</p>
                  <div class="checkBox" v-for="(item,idx3) in symptomQT" :key="'b'+idx3">
                    <van-checkbox  
                    icon-size="12px" 
                    shape 
                    v-model="symptomQT[idx3].check"
                    ref="checkboxes">
                    {{ item.title }}
                    </van-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="activity">
            <p class="titleP">活动和身体功能（单选）</p>
            <div class="eatCon">
              <span class="serialNumber">1</span>
              <div class="subject"> 
                <p>在过去的1月，我的总体活动情况是</p> 
                <div class="subjectCon" >
                  <van-radio-group v-model="list.activity" direction="horizontal" @change="activityChange($event)">
                    <van-radio 
                    icon-size="12px" 
                    shape  
                    v-for="(item,item1) in activity" 
                    :key="item1" 
                    :name='item.id'>
                    {{item.title}}
                    </van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="bom-info main">
          <div class="journalTitle">
            <!- <img src="@/assets/images/journal/stjyd.png" alt /> ->
            <h1>营养风险筛查</h1>
          </div>
          <div class="">
            <div class="weightCon">
              <p style="font-size: 15px;color:#000;font-weight: bold;">体重丢失评分</p> 
              <div class="problemBox" v-for="(item,index) in weight" :key="index">
                <span class="serialNumber">{{ index + 1 }}</span>
                <p class="problem">{{ item.problem }}</p>
                <div class="choice">
                  <van-radio-group  v-model="item.radio" @change="weightChange($event,index)" direction="horizontal">
                    <van-radio name="1" icon-size="12px" shape="square">是</van-radio>
                    <van-radio name="2" icon-size="12px" shape="square">否</van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <van-button  class="btn" v-if='btnShow' @click="submit" type="info" block>提交</van-button>
        <div class="bom-info main" v-if="show">
          <div class="journalTitle">
            <!-- <img src="@/assets/images/journal/stjyd.png" alt /> -->
            <h1>营养受损状态</h1>
          </div>
          <div class="weightCon">
            <p style="font-size: 15px;text-align:left;">
              {{defen}}
            </p> 
            <p style="font-size: 15px;text-align:left;">
              {{p}}
            </p> 
          </div>
        
        </div>
      </div>
   </div>
  </div>
</template>
<script>
import { pgsga } from "@/apis/patient"
export default {

  data() {
    return {
      date:null,
      list: {
        tizhong:'',
        tizhong1:'',
        tizhong2:'',
        tizhongbianhua:'',
        jsinfo:[],
        jsinfo1:[],
        zhengzhuang:[],
        zhengzhuang1:[-1],
        huodonginfo:'',
        
        // yy_bmi:'',
        // yy_tizhong:'',
        // yy_shiwu:'',
        // yy_jibing:'',
      },
      defen:"",
      p:'',
      btnShow:true,
      radioTz:[],
      eat:[{check:'',title:"没变化"},{check:'',title:"比以往多"},{check:'',title:"比以往少"},],
      atPresent:[
        {check:'',title:"正常饮食"},
        {check:'',title:"正常饮食但比正常情况量少"},
        {check:'',title:"少量固体食物"},
        {check:'',title:"只能进流食"},
        {check:'',title:"只能口服营养制剂"},
        {check:'',title:"几乎吃不下什么"},
        {check:'',title:"只能管饲或静脉营养"}
        ],
      symptom:[
        {check:'',title:"吃饭没有问题"},
        {check:'',title:"无食欲，不想吃饭"},
        {check:'',title:"恶心"},
        {check:'',title:"呕吐"},
        {check:'',title:"便秘"},
        {check:'',title:"腹泻"},
        {check:'',title:"口腔溃疡"},
        {check:'',title:"口干"},
        {check:'',title:"感觉食品没味，变味"},
        {check:'',title:"食物气味不好"},
        {check:'',title:"吞咽困难"},
        {check:'',title:"一会就饱了"},
        {check:'',title:"疼痛"},
        {check:'',title:"腹胀"},
      ],
      symptomQT:[
        {check:'',title:"抑郁"},
        {check:'',title:"经济（金钱）"},
        {check:'',title:"牙齿问题"},
      ],
      activity:[
        {id:'1',check:'',title:"正常，无限制"},
        {id:'2',check:'',title:"不像往常，但还能起床轻微活动"},
        {id:'3',check:'',title:"多数时候不想起床活动，但卧床或坐椅的时间不超过12个小时"},
        {id:'4',check:'',title:"几乎干不了什么，一天多数时间卧床或坐椅上"},
        {id:'5',check:'',title:"几乎完全卧床，无法起床"},
        ],
      weight:[
        {problem:'BMI<20.5',radio:[]},
        {problem:'病人在过去3个月有体重下降吗？',radio:[]},
        {problem:'病人在过去1周内有摄食减少吗？',radio:[]},
        {problem:'病人有严重疾病吗？（如ICU治疗）',radio:[]},
      ],
      show:false,
      // souSun:[
      //   '正常营养状态',
      //   '3个月内体重丢失>5%或食物摄入比正常需要低25%~50%',
      //   '一般情况差或2个月内体重丢失>5%，或食物摄入比正常需要低50%~70%',
      //   'BMI<18.5且一般情况差，或一个月内体重丢失>5%（或3个月内体重下降15%），一般受损或者前1周食物食物摄入比正常需要低75%~100%'
      //   ],
      //   zengJia:[
      //     '正常营养状态',
      //     '需要轻量提高：髋关节周折，慢性疾病有急性并发症者（肝硬化，COPD，慢性血液透析，糖尿病，肿瘤病人）'
      //   ]
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    newDate() {
      var newDate = new Date();
      var month =newDate.getMonth() < 9 ? "0" + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      var date1 = newDate.getDate() <= 9 ? "0" + newDate.getDate() : newDate.getDate();
      this.date = newDate.getFullYear() + "-" + month + "-" + date1;
      
    },
    tzbh($event) {
      this.list.tizhongbianhua = $event
    },

    activityChange($event) {
      console.log($event)
      this.list.huodonginfo = $event
    },
    weightChange($event,index) {
      if(index==0){
        this.list.yy_bmi = $event
      }
      if(index==1){
        this.list.yy_tizhong = $event
      }
      if(index==2){
        this.list.yy_shiwu = $event
      }
      if(index==3){
        this.list.yy_jibing = $event
      }
    },
    submit() {
      this.btnShow = false
      this.eat.forEach((item,index) => {
        if(item.check == true) {
          this.list.jsinfo.push(index+1)
        }
      })
      this.atPresent.forEach((item,index) => {
        if(item.check == true ){
          this.list.jsinfo1.push(index+1)
        }
      })
       this.symptom.forEach((item,index) => {
        if(item.check == true ){
          this.list.zhengzhuang.push(index+1)
        }
      })
      this.symptomQT.forEach((item,index) => {
        this.list.zhengzhuang1 = []
        if(item.check == true ){
          this.list.zhengzhuang1.push(index+1)
        }
      })
      var a = 0
      for(var key in this.list){
        if(!this.list[key]) {
          a++
        };
      }
      if(a>0){
        alert('请完善信息')
        this.btnShow = true
      }else{
        this.list.hzid = this.$route.params.id
        pgsga(this.list)
        .then( res => {
          if(res.codes=="200"){
            this.$toast("提交成功");
            var sum = null
            sum =  res.data.data.tzfen + res.data.data.jsfen + res.data.data.zzfen + res.data.data.hdfen 
           if(sum > 2){
             this.defen = "得分：" + sum 
             this.p = "营养不良"
           }else if(sum <= 2 ){
             this.defen = "得分：" + sum 
             this.p = "营养良好"
           }
            this.show = true
            this.list.zhengzhuang1 = []
            this.list.jsinfo=[],
            this.list.jsinfo1=[],
            this.list.zhengzhuang=[],
            // this.btnShow = false
            this.scroll()
          }
        })
        .catch(err => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
          this.btnShow = true
        });
      }
     
    },
    scroll() {
      var container = this.$el.querySelector("#PG-SGA .rom");
      this.$nextTick(() => {
        console.log(container.scrollHeight)
        container.scrollTop = container.scrollHeight;
        console.log(container.scrollTop)
      })
    }
  },
  mounted() {
    this.newDate()
  },
  created() {
    this.detailId = this.$route.params.id;
  },
};
</script>
<style lang="less">
html {
  min-height: 100vh;
  background-color: #fff;
}
#PG-SGA {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 15px;
  .rom{
    height: 100vh;
    // overflow: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .rom::-webkit-scrollbar {
  display: none; /* Chrome Safari */
  }
  .heaTitle{
    width: 90%;
    margin: 15px auto;
    display: flex;
    align-items: flex-end;
    p{
      display: inline-block;
    }
    .p2{
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .old .van-cell__title{
    span{
      display: block;
      width: 80vw;
    }
  }
  .top {
    height: 150px;
    background: #4e8af4;
    .van-nav-bar {
      color: #fff;
      border: 0 solid #4e8af4;
      background: #4e8af4;
      div {
        color: #fff;
        span {
          color: #fff;
        }
        i {
          color: #fff;
        }
      }
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0px;
    }
    .date {
      width: 120px;
      height: 30px;
      border-radius: 10px;
      margin: 25px auto 0;
      background: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
    }
  }

  .bom-info {
    width: 94.53%;
    border-radius: 10px;
    margin: 15px auto 0;
    padding: 20px 12px;
    background: #fff;
    .journalTitle {
      display: flex;
      align-items: center;
      flex-direction: row;
      margin-bottom: 15px;
      img {
        width: 40px;
        height: 40px;
      }
      h1 {
        font-size: 16px;
        // color: #3b8afc;
        color: #000;
        font-family: SourceHanSansCN;
        font-weight: bold;
      }
    }
    .eat,
    .atPresent,
    .symptom,
    .activity,
    .weight{
       width: 100%;
       color: #929292;
       margin-top: 15px;
        .titleP{
          width: 100%;
          margin-bottom: 10px;
          font-size: 15px;
          text-align: left;
          font-weight: bold;
          color: #000000;
        }
        .eatCon{
          display: flex;
          align-items: flex-start;
          p{
            text-align: left;
          }
          .subject{
            p{
              margin-top: 2px;
            }
          }
        }
        .subjectCon{
          display: flex;
          align-items: center;
          .checkBox{
            margin-right: 20px;
          }
        }
      }
    .atPresent .subjectCon,
    .symptom .subjectCon,
    .activity .subjectCon{
      flex-direction: column;
      align-items: flex-start;
      .checkBox{
        margin-top: 10px;
      }

    }
    .activity{
      .van-radio{
        width: 100%;
      }
    }
    .serialNumber{
      font-size: 12px;
      display: inline-block;
      margin-right: 10px;
      margin-top: 5px;
      color: #fff;
      width: 16px;
      min-width: 16px;
      height: 16px;
      line-height: 20px;
      border-radius: 50%;
      background: #64C412;
    }
    
  }
  .van-radio{
    margin-top: 10px;
    align-items: flex-start;
    .van-radio__label{
      color:#929292;
      font-size: 14px;
      text-align-last: left;
    }
    
  }
 
  .van-checkbox{
    display: flex;
    align-items: center;
    .van-checkbox__label{
      color:#929292;
      font-size: 14px;
      margin-top: 4px;
    }
  }
  .line{
    width: 108%;
    margin: 15px 0 15px -4%;
    height: 1px;
    background: #D2D2D2;
    opacity: 0.5;
  }
  .weightCon{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 15px;
    color:#919191;
    .problemBox{
      display: flex;
      align-items: center;
      .problem{
        width: 47vw;
        text-align: left;
        margin-top: 10px;
        margin-right: 25px;
      }
      .serialNumber{
        margin-top: 10px;
      }
    }
    .serialNumber{
      margin-top: 0;
    }
  }
  .van-radio__icon{
    margin-top: 2px;
  }
  .van-radio__icon .van-icon,.van-checkbox__icon .van-icon{
    font-size: inherit;
  }
   .btn{
    width: 90vw;
    margin: 15px auto;

  }
    
}
</style>
